<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/include/service-base-header.jsp" %>
    <title>banner</title>
    <style>
        .table tbody tr td, .table th {
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <jsp:include page="/include/left_menu.jsp">
        <jsp:param name="index" value="5"/>
    </jsp:include>
    <div class="main-panel">
        <nav class="navbar navbar-expand-lg "
             style="-webkit-box-shadow:0 0 5px rgba(40, 173, 243, 0.0);box-shadow: 0 0 5px rgba(40, 173, 243, 0.0);">
            <div class="container-fluid">
                <div class="navbar-wrapper" style="padding-top: 0.5rem;padding-bottom: 0.5rem">
                    <a href="${pageContext.request.contextPath}/s/setting.do"
                       style="font-size: 1rem;margin-left: 0.3rem;color: #555555">热门比赛</a>
                    <a href="${pageContext.request.contextPath}/s/banner.do"
                       style="font-size: 1rem;margin-left: 1rem">轮播图</a>
                    <a href="${pageContext.request.contextPath}/s/messageInfo.do"
                       style="font-size: 1rem;margin-left: 1rem;color: #555555">系统公告</a>
                </div>
            </div>
        </nav>
        <nav class="navbar navbar-expand-lg "
             style="-webkit-box-shadow:0 0 5px rgba(40, 173, 243, 0.0);box-shadow: 0 0 5px rgba(40, 173, 243, 0.0);">
            <div class="container-fluid">
                <div class="navbar-wrapper">
                    <a href="${pageContext.request.contextPath}/s/banner.do"
                       style="font-size: 0.9rem;margin-left: 0.2rem">轮播图</a>
                    <span style="font-size: 0.9rem;">&nbsp; / &nbsp;添加轮播图</span>
                </div>
            </div>
        </nav>
        <div class="navbar-wrapper col-md-12" style="margin-top: 1rem">
            <span class="btn btn-info" role="button" onclick="saveBanner()" style="margin-right: 2rem;">添  加</span>
        </div>
        <div class="row col-md-12">
            <div class="col-md-6">
                <div class="card">
                    <div class="col-md-12">
                        <div class="form-group bmd-form-group">
                            <label class="bmd-label-floating">标题</label>
                            <input type="text" class="form-control" id="title">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="btn-group bootstrap-select">
                            <select class="selectpicker" data-style="select-with-transition" title="单选" data-size="7"
                                    tabindex="-98" id="type_select">
                                <option class="bs-title-option" value=""><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">选择轮播图类型</font></font></option>
                                <option value="2"><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">热门赛事</font></font></option>
                                <option value="3"><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">外链</font></font></option>
                            </select></div>
                    </div>
                    <div class="form-group col-md-12" id="hot_div">
                        <label for="hot_select">选择热门比赛</label>
                        <select class="form-control" id="hot_select">
                        </select>
                    </div>
                    <div class="col-md-12" id="wailian_div">
                        <div class="form-group bmd-form-group">
                            <label class="bmd-label-floating">输入外链地址</label>
                            <input type="text" class="form-control" id="wai_lian">
                        </div>
                    </div>
                    <div class="row" style="margin-left: 1rem">
                        <div class="form-group bmd-form-group is-filled">
                            <input type="text" class="form-control datetimepicker" id="sta_time" placeholder="开始时间">
                        </div>
                        <div class="form-group bmd-form-group is-filled"><span
                                style="margin-left: 2rem;margin-right: 3rem">至</span></div>
                        <div class="form-group bmd-form-group is-filled">
                            <input type="text" class="form-control datetimepicker" id="end_time" placeholder="结束时间">
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-md-6 card">
                <div class="fileinput text-center fileinput-new" data-provides="fileinput" style="margin-top: 2rem">
                    <div class="fileinput-new thumbnail img-raised">
                        <img src="../image/image_placeholder.jpg" alt="..." id="imageview">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail img-raised" style=""></div>
                    <div>
                                    <span class="btn btn-raised btn-round btn-default btn-file">
                                        <span class="fileinput-new"><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">选择图像</font></font></span>
                                        <span class="fileinput-exists"><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">更改</font></font></span>
                                        <input type="hidden" value="" name="..."><input type="file" name="img"
                                                                                        id="upload_file"
                                                                                        onchange="zcuploadImageCover(this)">
                                    <div class="ripple-container"></div></span>
                        <a onclick="deleteImagePath()" class="btn btn-danger btn-round fileinput-exists"
                           data-dismiss="fileinput"><i
                                class="fa fa-times"></i><font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;"> 去掉</font></font></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>
</body>
<script>
    function init() {
        $('.datetimepicker').datetimepicker({
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-chevron-up",
                down: "fa fa-chevron-down",
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-screenshot',
                clear: 'fa fa-trash',
                close: 'fa fa-remove'
            },
            format: 'YYYY-MM-DD'
        });
    }
    init();

    $('#type_select').change(function () {
        var type = $(this).children('option:selected').val();
        if (type == 2) {
            $("#wailian_div").hide();
            $("#hot_div").show();
            getHotEvents();
        } else {
            $("#wailian_div").show();
            $("#hot_div").hide();
        }
    });


    $('#exampleFormControlSelect1').change(function () {

    })

    function getHotEvents() {
        var datas = {}
        datas.isEnable = 0;
        datas.isHot = 1;
        $.ajax({
            url: baseUrl.base + baseUrl.customEvent + "/getHotEvents",
            type: 'get',
            data: datas,
            success: function (data) {
                if (data.code == "0") {
                    var results = data.results;
                    for (var i = 0; i < results.length; i++) {
                        var name = results[i].eventHomeName + 'VS' + results[i].eventAwayName;
                        var eventId = results[i].eventId;
                        $("#hot_select").append('<option value=' + eventId + '>' + name + '</option>');
                    }
                }
            }
        })
    };

    var adImage = "";
    function saveBanner() {
        var title = $("#title").val();
        var typeSelectVale = $("#type_select").val();
        var bannerFlag = 0;
        var eventId = 0;
        var url = "";
        if (typeSelectVale == 2) {
            //热门赛事
            eventId = $("#hot_select").val();
            bannerFlag = 1;
            url = baseUrl.web_base + "/views/race-detail.html?eventId=" + eventId;
        } else if (typeSelectVale == 3) {
            bannerFlag = 2;
            //外链
            url = $("#wai_lian").val();
        }
        var staTime = $("#sta_time").val();
        var endTime = $("#end_time").val();
        var datas = {};
        datas.title = title;
        datas.bannerFlag = bannerFlag;
        datas.adImage = adImage;
        datas.url = url;
        if (bannerFlag == 1) {
            datas.eventId = eventId;
        }
        datas.staTime = staTime;
        datas.endTime = endTime;
        if (null == title || title.length <= 0) {
            showNotification('bottom', 'right', 'title不可为空');
            return;
        }
        if (typeSelectVale < 2) {
            showNotification('bottom', 'right', '轮播图类型不可为空');
            return;
        }
        if (null == staTime || staTime.length < 10) {
            showNotification('bottom', 'right', '开始时间不可为空 或者格式错误');
            return;
        }
        if (null == endTime || endTime.length < 10) {
            showNotification('bottom', 'right', '结束时间不可为空 或者 格式错误');
            return;
        }
        if (null == adImage || adImage.length <= 0) {
            showNotification('bottom', 'right', '图片不可为空');
            return;
        }

        $.ajax({
            url: baseUrl.base + baseUrl.adInfo + "/insertAd",
            type: 'POST',
            data: datas,
            success: function (data) {
                if (data.code == "0") {
                    showNotification('bottom', 'right', '轮播图信息上传成功');
//                    window.history.go(-1);
//                    location.reload();
                    self.location = document.referrer;
                }
            }
        })
    }
    var file;

    function zcuploadImageCover(e) {
        var fileName = $("#upload_file").val();
        if (null == fileName || fileName == "") { //点击取消，取消事件的编写
            return;
        }
        var pic = $('#upload_file')[0].files[0];
        file = pic;
        if (undefined == pic) {
            return
        }
        var fd = new FormData();
        fd.append('img', pic);
        $.ajax({
            url: baseUrl.base + "imgUploadCtl/imgUpload",
            type: "post",
            // Form数据
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                adImage = data.url;
                showNotification('bottom', 'right', '图片上传成功');
            }
        });
    }

    function deleteImagePath() {
        adImage = "";
    }
</script>
</html>